<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="cdn/vue-3.2.26.js"></script>
    <script src="cdn/element-ui.js"></script>
    <link rel="stylesheet" href="cdn/element-plus.css">
    <script src="./cdn/axios-0.24.0.js"></script>
    <script src="js/request.js"></script>
    <script src="js/objectToFormData.js"></script>
    <script src="js/md5.js"></script>
</head>
<body>
    <div id="app">
        <div class="login-container">
            <div class="form-container">
              <div class="form-header">
                欢迎登录
              </div>
              <el-form ref="loginFormRef"
                       :model="loginForm"
                       :rules="loginRules"
                       label-width="100px"
                       class="demo-ruleForm"
                       :size="formSize">
                <el-form-item label="账号"
                              prop="Account">
                  <el-input v-model="loginForm.Account"
                            placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码"
                              prop="Password">
                  <el-input v-model="loginForm.Password"
                            type="password"
                            show-password
                            placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                  <span>还没有账号?<a href='./register.html'
                                 id="register-link">去注册</a></span>
                  <el-button type="primary"
                             class="login-btn"
                             @click="login">登录</el-button>
                </el-form-item>

              </el-form>
            </div>
        </div>
    </div>
</body>
<script>
    const { reactive, ref, toRefs } = Vue
    const { ElMessage } = ElementPlus
    const App = {
        setup(){
            const state = reactive({
              loginForm: {
                Account: "",
                Password: ""
              }
            })
            const loginRules = reactive({
              Account: [
                {
                  required: true,
                  message: '请输入账号',
                  trigger: 'blur'
                }
              ],
              Password: [
                {
                  required: true,
                  message: '请输入密码',
                  trigger: 'blur'
                }
              ]
            })
            const loginFormRef = ref('')
            const formSize = ref('')

            
            const login = async () => {
                loginFormRef.value.validate(valid => {
                    if (valid){
                        const params = {
                            Account: state.loginForm.Account,
                            Password: state.loginForm.Password
                        }
                        request({
                            url: "/login",
                            method: 'POST',
                            data: objectToFormData(params)
                        })
                        .then(res => {
                            if(res.status === 200){
                                const { data } = res
                                if (data.code === '2000'){
                                    ElMessage.success("登录成功")
                                    const result = data.data
                                    window.localStorage.setItem("UserName",result.UserName)
                                    window.localStorage.setItem("Account",result.Account)
                                    window.localStorage.setItem("UserID",result.UserID)
                                    window.location.href = "index.html"
                                }else{
                                    ElMessage.error(data.data.error)
                                }
                            }
                        })
                    }
                })
            }
            return {
              ...toRefs(state),
              loginRules,
              loginFormRef,
              login,
              formSize
            }
        }
    }
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app")

</script>
<style>
    .login-container {
      width: 1200px;
      display: flex;
      justify-content: flex-end;
      margin: 30px auto;
      height: 1000px;
      background: url("../static/img/background.jpeg") no-repeat;
    }
    .form-container {
    width: 30%;
    margin-top: 150px;
    margin-right: 10%;
    }
    .el-form-item {
      margin-bottom: 45px;
    }
    #register-link {
        color: #99ccff;
        text-decoration: underline;
    }
    .login-btn {
        position: absolute;
        width: 35%;
        right: 0;
    }
    .form-header {
      text-align: center;
      margin-left: 50px;
      margin-bottom: 30px;
      font-size: 20px;
      line-height: 20px;
      color: #ffd04b;
    }
</style>
</html>